<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户点赞信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <!--<link rel="stylesheet" href="/css/userProfiles.css">-->
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <style>
        .comment {
            padding-top: 5%;
        }
        .comment .row{
            margin-bottom: 20px;
        }

        .comment-star i{
            color: #F3D408;
        }

        .comment-date{
            color: #BBBBBB;
            margin-left: 20px;
        }

        .comment p,.comment span{
            font-size: 13px;
        }

        .comment-img{
            width:90%;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            padding-left: 0;
            list-style: none;
        }

        .comment-img li{
            width:33%;
            height: 70px;
        }
        .comment-img img{
            width:90%;
            height:90%;
        }

        .comment-link{
            position: relative;
            height: 40px;
            background-color: #F4EEEE;
        }

        .comment-link a{
            color: rgba(123, 120, 120, 1);
            font-size: 14px;
            text-align: center;
        }

        .comment-link img{
            height: 70%;
            width: 30px;
            margin: 6px 5px 5px 8px;
        }

        .comment-link i{
            position: absolute;
            top: 4px;
            right: 10px;

        }

        .comment-head img{
            width: 100%;
        }


        @media screen and (max-width: 600px) {
            .comment-head img {
                width: 150%;
            }
        }
    </style>
    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            var currentPage = 1;
            var pages;
            var goodsMsg;

            // 获取点赞内容
            $.get("/users/" + user.id + "/addGoodMsgs", function (data) {
                pages = data.pages;
                goodsMsg = data.list;
                var i = 0;
                $("#comments").renderValues(data, {
                    handle: function (ele, value) {
                        $("#comments").attr("style", "display:''");
                        if (data.list[i].travel) {
                            $(ele).attr("href", "/travelContent.html?id=" + value);
                        } else if (data.list[i].strategy) {
                            $(ele).attr("href", "/strategyCatalogs.html?strategyId=" + value);
                        } else if (data.list[i].news) {
                            $(ele).attr("href", "/newsContent.html?id=" + value);
                        } else {
                            $(ele).attr("href", "/hotelContent.html?id=" + value);
                        }
                        i++;
                    }
                })
            });

            // 清空临时信息
            $("#cleanMsg").click(function () {
                $(document).dialog({
                    type:"confirm",
                    style:"ros",
                    titleShow:false,
                    closeBtnShow: true,
                    content:"确定清空吗?",
                    buttons:[
                        {
                            name:"确定",
                            callback:function () {
                                $.ajax({
                                    url: "/users/1/good",
                                    type: "DELETE",
                                    success: function (data) {
                                        $(document).dialog({
                                            type:"confirm",
                                            style:"ros",
                                            titleShow:false,
                                            content:"清除成功",
                                            buttons:[{
                                                name:"确定",
                                                callback:function () {
                                                    window.location.reload();
                                                }
                                            }]
                                        });
                                    }
                                })
                            }
                        },
                        {
                            name:"取消",
                            callback:function () {
                            }
                        }
                    ]
                });
            });



            // 翻页
            $(window).scroll(function () {
                if (isEnd()) {
                    console.log(currentPage);
                    console.log(pages);
                    // 判断是否有下一页
                    if(currentPage < pages){
                        // currentPage +1 , 发送ajax请求获取下一页到游记
                        currentPage++;
                        $.get("/users/" + user.id + "/addGoodMsgs", {"currentPage": currentPage}, function (data) {
                            // 返回的数据只有翻页后的数据，没有当前页的数据，直接渲染原来的数据就没有了
                            // 原来的数据+当前的数据
                            $.merge(goodsMsg, data.list);
                            var i = 0;
                            $("#comments").renderValues({list: goodsMsg}, {
                                handle: function (ele, value) {
                                    if (goodsMsg[i].travel) {
                                        $(ele).attr("href", "/travelContent.html?id=" + value);
                                    } else if (goodsMsg[i].strategy) {
                                        $(ele).attr("href", "/strategyCatalogs.html?strategyId=" + value);
                                    } else if (goodsMsg[i].news) {
                                        $(ele).attr("href", "/newsContent.html?id=" + value);
                                    } else {
                                        $(ele).attr("href", "/hotelContent.html?id=" + value);
                                    }
                                    i++;
                                }
                            })
                        },"json");
                    } else {
                        $(document).dialog({
                            type:"notice",
                            infoText:"已经到底部了",
                            autoClose:2500,
                            position:"bottom"
                        });
                    }

                }
            });
        });
    </script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left" ></i></span>
            </a>
        </div>
        <div class="col-7">
            <span>信息最多存储20条</span>
        </div>
        <div class="col-3"><span id="cleanMsg"><i class="fa fa-trash"></i>清空</span></div>
    </div>
</div>

    <div class="comment" id="comments" style="display: none">
        <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <img class="rounded-circle" src="/upload/bunny.jpg" render-src="list.user.headImgUrl">
                    </div>
                    <div class="col">
                    <!--<span class="comment-star"><i class="fa fa-star"></i><i class="fa fa-star"></i><i-->
                            <!--class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></span>-->
                        <span class="comment-date" render-html="list.time"></span>
                        <div class="comment-content">
                                <p>我点赞了</p>
                        </div>
                        <div class="comment-link">
                            <a href="strategyCatalogs.html" render-key="list.allAddGoodMsg.id" render-fun="handle">
                                <img render-src="list.allAddGoodMsg.coverUrl"> <span>点击查看点赞信息详情</span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>
                    </div>
                </div>
            <!--</dl>-->
        </div>
    </div>
<script>
</script>
</body>
</html>